import { createComponent } from '../utils/component-factory'
import {typeOptions, effectOptions } from '../utils/Types'

export default createComponent({
  name: 'el-alert',
  label: 'Alert 警告',
  category: 'Feedback',
  canBeSlotContent: false,
  props: {
    title: {
      label: '标题',
      type: 'input',
      default: '标题',
      description: '警告标题'
    },
    type: {
      label: '类型',
      type: 'select',
      default: 'info',
      description: '警告类型',
      editorProps: {
        options: typeOptions.alert
      }
    },
    description: {
      label: '辅助文字',
      type: 'input',
      default: '',
      description: '警告的辅助文字'
    },
    closable: {
      label: '可关闭',
      type: 'boolean',
      default: true,
      description: '是否可关闭',
      editorProps: {
        component: 'el-switch',
        activeText: '可关闭',
        inactiveText: '不可关闭'
      }
    },
    center: {
      label: '文字居中',
      type: 'boolean',
      default: false,
      description: '文字是否居中',
      editorProps: {
        component: 'el-switch'
      }
    },
    closeText: {
      label: '关闭按钮文字',
      type: 'input',
      default: '',
      description: '关闭按钮自定义文字'
    },
    showIcon: {
      label: '显示图标',
      type: 'boolean',
      default: false,
      description: '是否显示图标',
      editorProps: {
        component: 'el-switch'
      }
    },
    effect: {
      label: '主题',
      type: 'select',
      default: 'light',
      description: '警告主题',
      editorProps: {
        options: effectOptions.alert
      }
    }
  },
  events: {
    close: {
      label: '关闭',
      description: '关闭警告时触发'
    }
  },
  slots: {
    default: {
      label: '默认',
      default: '',
      description: '警告内容'
    },
    title: {
      label: '标题',
      default: '',
      description: '标题内容'
    }
  }
})